import { defineStore } from 'pinia'
import { h } from 'vue'
import { RouterLink } from 'vue-router'
// 接口获取路由 自己对接口
// import { getRouters } from "@/api/menu.js"
// import SvgIcon from '@/components/SvgIcon.vue'
import { NIcon } from 'naive-ui'
import type { Component } from 'vue'
import { routerData } from '@/mock/datas.js'
const modules = import.meta.glob('../views/**/*.vue') //任意层级

//  icon 标签
const renderIcon = (icon: Component) => {
  return () => h(NIcon, null, { default: () => h(icon) })
}
// const renderIcon = (name: any) => {
//   return () => h(SvgIcon, { name }, undefined)
// }

// 单个路由
const getRouterItem = (item: any) => {
  const { name, path, meta, component } = item
  const obj = {
    path,
    name,
    meta,
    component: modules[`../views/${component}`]
  }
  return obj
}

// 获取异步路由
// 所有异步路由都是layout的子路由，并且routers只有一层children，没有考虑很复杂的情况。
// 将所有异步路由都存放在rmenu数组中，返回。
const getAayncRouter = (routers: any) => {
  const rmenu = [] as any
  routers.forEach((item: any) => {
    if (item.children && item.children.length) {
      item.children.map((_item: any) => {
        const obj = getRouterItem(_item)
        obj.meta.parentTitle = item.meta.title
        rmenu.push(obj)
      })
    } else {
      rmenu.push(getRouterItem(item))
    }
  })
  return rmenu
}

// 获取侧边栏导航
const getSiderMenu = (routers: any) => {
  const smenu = [] as any

  routers.forEach((item: any) => {
    const children = [] as any
    let obj = {}

    if (item.children && item.children.length) {
      // 二级 menu
      item.children.map((_item: any) => {
        if (!_item.hidden) {
          children.push({
            label: () => h(RouterLink, { to: _item.path }, { default: () => _item.meta.title }),
            title: _item.meta.title,
            key: _item.name,
            icon: renderIcon(_item.meta.icon)
          })
        }
      })
      obj = {
        label: item.meta.title,
        title: item.meta.title,
        key: item.name,
        icon: renderIcon(item.meta.icon),
        children
      }
    } else {
      // 一级 menu
      obj = {
        label: () => h(RouterLink, { to: item.path }, { default: () => item.meta.title }),
        title: item.meta.title,
        key: item.name,
        icon: renderIcon(item.meta.icon)
      }
    }

    smenu.push(obj)
  })
  return smenu
}

export const usePermissionStore = defineStore({
  id: 'permissionStore',
  state: () => {
    return {
      siderMenu: [],
      activeMenuValue: ''
    }
  },
  actions: {
    getRouters() {
      return new Promise((resolve, reject) => {
        this.siderMenu = getSiderMenu(routerData)
        resolve(getAayncRouter(routerData))
        // getRouters()
        //   .then(({ data }) => {
        //     this.siderMenu = getSiderMenu(data)
        //     resolve(data)
        //   })
        //   .catch((err) => {
        //     reject(err)
        //   })
      })
    }
  }
})
